<template>
    <div id="my-order">
      <el-card class="box-card" style="width: 80%;margin-left: 150px;height: 1000px">
          <img src="../assets/img.png" alt="图片描述" style="max-width: 100%; max-height: 200px; height: auto;"/>
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <div class="order-control-button" >
                <el-button @click="setFlagA" type="warning" style="color:#ffffff" round>我接收的订单</el-button>
                <el-button @click="setFlagP"  style="background-color:#545c64;color:#ffffff" round>我发布的顶单</el-button>
              </div>

            </div>
          </div>
      <el-card style="width: 100%">
        <img src="../assets/img_1.png" alt="图片描述" style="max-width: 100%; max-height: 200px; height: auto;"/>


            <div v-for="(item,index) in orders"  :key="item.id" id="my-order-content">
            <div class="top">
                <span class="category">{{item.categoryName}}</span>
                <span class="time">{{item.createTime}}</span>

                <span v-if="seen" class="a-mark">接收状态:</span>
                <span v-if="seen" class="a-result">{{item.orderAcceptedResult}}</span>
            </div>
            <div class="bottom">
                <div class="order-title">{{item.orderMain}}</div>
                <div class="order-do-button">
                    <el-button @click="goToMyOrder(item.id)" type="info">查看</el-button>
                    <el-button type="success" v-if="!(seen)" @click="finishOrder(item.id,index)" :disabled="item.disabledFlag">完成</el-button>
                    <el-button @click="deleteMyOrder(item.id)" v-if="seen" type="danger" >撤销</el-button>
                    <el-button @click="goToAS(item.id)"    v-if="seen" type="primary" class="checkC-button">查看接收人信息</el-button>
                </div>
            </div>
        </div>
      </el-card>
      </el-card>
    </div>
</template>

<script>
import img from "../assets/img.png"
export default{
    name: 'MyOrder',
    data(){
        return{
          fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
          url:img,
            seen:false,
            orderDetailPage: 0,
            res:{
                message:'',
                code:'',
                data:''
            },
            resD:{
                message:'',
                code:'',
                data:''
            },
            resF:{
                message:'',
                code:'',
                data:''
            },
            orders:[{
                id:'',
                orderMain:'',
                createTime:'',
                orderCheckState:'',
                categoryName:'',
                orderCheckResult:'',
                orderAcceptedState:'',
                orderAcceptedResult:'',
                disabledFlag: false,
            }]
        }
    },
    created(){
        this.queryOrderInfoIAccepted();
    },
    methods:{
        deleteMyOrder(orderId){
            this.$axios.delete("/order/deleteById/"+orderId).then((response)=>{
                this.resD = response.data;
                if(this.resD.code == "200"){
                    this.$message({
                        message: this.resD.message,
                        type: 'success'
                    });
                    this.queryOrderInfoReleased();
                }else{
                    this.$message.error(this.resD.message);
                }
            })
        },
        goToMyOrder(id){
            if(this.seen == true){
                this.orderDetailPage = 1;
            }
            this.$store.commit('populateOrderId',id);
            this.$store.commit('populateOrderDetailPage',this.orderDetailPage);
            this.$router.replace("/order-detail");
        },
        goToAS(id){
            this.$store.commit('populateOrderId',id);
            this.$router.replace("/order-accepted-situation");
        },
        setFlagA(){
            this.queryOrderInfoIAccepted();
            this.seen=false;

        },
        setFlagP(){
            this.queryOrderInfoReleased();
            this.seen=true;
        },
        queryOrderInfoIAccepted(){
            this.$axios.get("/order/getA/"+sessionStorage.getItem("userId")).then((response)=>{
               this.res = response.data;
               this.orders = this.res.data;

               for(var i = 0;i < this.res.data.length;i++){
                 this.orders[i].categoryName = this.res.data[i].category.categoryName;
                 if(this.orders[i].orderCheckState === 1){
                    this.orders[i].orderCheckResult = "通过"
                 }else{
                    this.orders[i].orderCheckResult = "未通过"
                 }
               }
            })
        },
        queryOrderInfoReleased(){
            this.$axios.get("/order/getR/"+sessionStorage.getItem("userId")).then((response)=>{
                this.res = response.data;
                this.orders = this.res.data;
                for(var i = 0;i < this.res.data.length;i++){
                    this.orders[i].categoryName = this.res.data[i].category.categoryName;
                    this.orders[i].orderAcceptedState = this.res.data[i].orderTransState;
                    if(this.orders[i].orderAcceptedState ===1){
                        this.orders[i].orderAcceptedResult = "已接收";
                    }else{
                        this.orders[i].orderAcceptedResult = "未接收";
                    }
                    if(this.orders[i].orderCheckState === 1){
                        this.orders[i].orderCheckResult = "通过"
                    }else{
                     this.orders[i].orderCheckResult = "未通过"
                    }
                }
            })
        },
        finishOrder(id,index){
            if(this.orders[index].disabledFlag == true){
                return;
            }
            this.$axios.put("/order/finish/"+id).then((response)=>{
                this.resF = response.data;
                if(this.resF.code == '200'){
                    this.$message.success(this.resF.message);
                    this.orders[index].disabledFlag = true;
                }else{
                    this.$message.error(this.resF.message);
                }
            })
        }
    }
}
</script >

<style lang="less" scoped>

</style>
